<template>
  <div class="expense">
    <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 25px">
      <el-breadcrumb-item>医院后台</el-breadcrumb-item>
      <el-breadcrumb-item>费用管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片内容 -->
    <!-- 侧边栏容器 -- 病房信息 -->
    <el-card
      shadow="never"
      border="false"
      :body-style="{ padding: '20px 15px !important' }"
      style="width: 40%; float: left"
    >
      <!----- 费用筛选 - 头部 ------>
      <template>
        <el-button style="background-color: rgba(190, 190, 190, 0.4)">费用来源</el-button>
        <el-button
          style="padding: 10px, 15px; margin-left: 10px; border: none"
          @click="search('不限')"
        >不限</el-button>
        <el-button
          style="padding: 10px, 15px; margin-left: 5px; border: none"
          @click="search('患者')"
        >患者</el-button>
        <el-button
          style="padding: 10px, 15px; margin-left: 5px; border: none"
          @click="search('药品')"
        >药品</el-button>
      </template>
      <el-divider></el-divider>
      <!----- 费用筛选 - 内容 ------>
      <template>
        <el-table
          :data="newDate"
          style="width: 100%; cursor: pointer"
          height="57vh"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="index" label="序号"></el-table-column>
          <el-table-column prop="id" label="ID编号"></el-table-column>
          <el-table-column prop="table" label="标签">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.table === '患者' ? 'danger' : 'success'"
                disable-transitions
              >{{scope.row.table}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <!-- 主要区域容器 -- 病房信息 -->
    <el-card style="width: 59%; float: right">
      <template>
        <i>￥收入（{{ cost2 }}.00元）</i>
        <i style="margin-left: 10px">￥支出（{{ cost1 }}.00元）</i>
        <el-divider></el-divider>
        <template>
          <el-row style="margin-top: 15px; text-align: center">
            <el-col :span="2">
              <span style="color: #008b45">+</span> /
              <span style="color: red">-</span>
            </el-col>
            <el-col :span="3">序号</el-col>
            <el-col :span="3">编号</el-col>
            <el-col :span="3">名字</el-col>
            <el-col :span="3">标签</el-col>
            <el-col :span="4">支付费用</el-col>
            <el-col :span="3">费用项</el-col>
            <el-col :span="3">审核人</el-col>
          </el-row>

          <!-- 病房信息显示 -->
          <el-row
            style="margin-top: 10px; text-align: center"
            v-for="(item, index) in multipleSelection"
            :key="item.id"
          >
            <el-col :span="2">
              <span style="color: #008b45" v-if="item.table === '患者'">+</span>
              <span style="color: red" v-else>-</span>
            </el-col>
            <el-col :span="3">{{ index + 1 }}</el-col>
            <el-col :span="3">{{ item.id }}</el-col>
            <el-col :span="3">{{ searchName(item.id) }}</el-col>
            <el-col :span="3">
              <el-tag
                :type="item.table === '患者' ? 'danger' : 'success'"
                disable-transitions
              >{{ item.table }}</el-tag>
            </el-col>
            <el-col :span="4">{{ item.cost }}</el-col>
            <el-col :span="3">{{ item.count }}</el-col>
            <el-col :span="3">{{ item.auditor }}</el-col>
          </el-row>
        </template>
        <el-divider></el-divider>
        <!-- 合计 -->
        <template>
          <h3 style="float: right; margin: 0 0 15px">合计：￥{{ getCost }}</h3>
        </template>
      </template>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'expense',
  data() {
    return {
      cost1: 0,
      cost2: 0,
      newDate: [],
      multipleSelection: []
    };
  },

  mounted() {
    this.newDate = this.expenseDate;
  },

  computed: {
    ...mapState('expense', ['expenseDate']),
    ...mapState('patient', ['patients']),
    ...mapState('medicine', ['drugs']),

    //返回总计
    getCost() {
      this.cost1 = 0;
      this.cost2 = 0;
      let sum = 0;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (this.multipleSelection[i].table === '药品') {
          sum -= this.multipleSelection[i].cost;
          this.cost1 += this.multipleSelection[i].cost;
        } else {
          sum += this.multipleSelection[i].cost;
          this.cost2 += this.multipleSelection[i].cost;
        }
      }
      return sum;
    }
  },

  methods: {
    //点击后触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },

    //筛选条件
    search(message) {
      console.log(message);
      if (message === '患者') this.newDate = this.expenseDate.filter(item => item.table === message);
      else if (message === '药品') this.newDate = this.expenseDate.filter(item => item.table === message);
      else this.newDate = this.expenseDate;
    },

    // 查找名字
    searchName(id) {
      if (id.startsWith('30')) {
        //30开头返回患者名字
        const name = this.patients.filter(item => item.patientID === id);
        return name[0].name;
      }
      if (id.startsWith('29')) {
        //29开头返回药品名字
        const name = this.drugs.filter(item => item.drugID.includes(id));
        return name[0].name;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.expense {
  //布局
  .el-col {
    font-size: 14px;
  }
}
</style>